import QtQuick 2.0
import QtQuick.Controls 1.4
import QtQuick.Controls.Styles 1.4
import "../../js/UI.js" as Style
import "../../js/util.js" as Util
Rectangle{
    id:searchRec
    width: 180
    height:30
    radius:height*0.5
    color: "#DBDBDB"
    property bool searchButton: false
    property alias searchTextWindth: searchText.width
    property alias iamgeIdWidth: iamgeID.width
    property alias m_content: searchText
    property alias m_text: searchText.text
    NumberAnimation{
        id: sousuoBtnAnimation
        target: searchButton ==false?falseSearch:realSearch
        duration: 100
        properties: "anchors.leftMargin"
    }
    Rectangle{
        id:falseSearch
        color:"transparent"
        width: parent.width
        height:parent.height
        anchors.left: parent.left
        anchors.leftMargin: 0
        visible: !searchButton
        Row{
            anchors.right: parent.right
            anchors.rightMargin: parent.width*0.05
            anchors.verticalCenter: parent.verticalCenter
            //anchors.centerIn: parent
            spacing: 10
            width:parent.width*0.6
            Image {
                sourceSize: Util.isHDScreen()?Qt.size(50, 50):Qt.size(18, 18)
                anchors.verticalCenter: parent.verticalCenter
                source: Style.ImagePathPC+"search2.svg"
            }
            AText {
                anchors.verticalCenter: parent.verticalCenter
                text: qsTr("搜索")
                font.pixelSize: Util.isHDScreen()?Style.hdCommonSize:Style.pcCommonSize
                color: "#999999"
            }
        }
        MouseArea{
            anchors.fill: parent
            onClicked: {
                searchButton = true
                searchText.forceActiveFocus()
                sousuoBtnAnimation.from=searchRec.width*0.3
                sousuoBtnAnimation.to = 0
                sousuoBtnAnimation.start()
            }
        }
    }
    Rectangle{
        id: realSearch
        color:"transparent"
        width: parent.width
        height:parent.height
        visible: searchButton
        anchors.left: parent.left
        anchors.leftMargin: searchRec.width*0.4
        Row{
            anchors{
                fill: parent
                margins: 10
            }
            Image{
                sourceSize: Util.isHDScreen()?Qt.size(50, 50):Qt.size(18, 18)
                anchors.verticalCenter: parent.verticalCenter
                source: Style.ImagePathPC+"search2.svg"
            }
            TextField{
                id:searchText
                anchors.verticalCenter: parent.verticalCenter
 //               anchors.horizontalCenter: parent.horizontalCenter
//                anchors.topMargin:10
//                anchors.bottomMargin: 1
                width: Util.isHDScreen()?260:130
                font.pixelSize: Util.isHDScreen()?Style.hdCommonSize:Style.pcCommonSize
                font.family: Style.fontfamily
                style: TextFieldStyle{
                    background: Rectangle{
                        implicitHeight: Util.isHDScreen()?60:30
                        implicitWidth:Util.isHDScreen()?240:140
                        color:"transparent"
                    }
                }
                onFocusChanged: {
                    if(focus == false){
                        searchText.text = ""
                        searchButton = false
                        sousuoBtnAnimation.from=-searchRec.width*0.2
                        sousuoBtnAnimation.to = 0
                        sousuoBtnAnimation.start()
                    }
                }
            }
        }
    }
    Image{
        id: iamgeID
        sourceSize: Util.isHDScreen()?Qt.size(30, 30):Qt.size(18, 18)
        visible: searchText.length >0
        anchors.verticalCenter: parent.verticalCenter
        anchors.right: parent.right
        anchors.rightMargin: 0.2*m_lineValue
        source: Style.ImagePathPC+"icon_quxiao.png"
        MouseArea{
            anchors.fill: parent
            onClicked: {
                searchText.text=""
                searchText.focus =false
            }
        }
    }
}



